.toc-tree {
  position: relative;

  .toc-items {
    font-size: 13px;
    @extend .list-style-none;
  }
  // edit-switch-component

  .btn-new {
    height: 32px;
    line-height: 32px;
    padding-left: calc(15px + 3px);
    text-align: left;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;

    .fas {
      font-size: 1.2em;
      color: #444;
      font-weight: bold;
      margin-right: 5px;
    }

    &:hover {
      color: $black !important;
      background: #fff;
      border-color: #f0f0f0;
    }
    &:active {
      background: #eaeaea;
    }
  }

  //
  .toc-items {
    font-size: 13px;
    @extend .list-style-none;
    .toc-item {
      position: relative;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: default;
      &[data-link="true"] {
        .item-slug,
        .item-link {
          cursor: pointer;
          &:hover {
            color: $primary;
          }
        }
      }
      &.active {
        color: $primary;
        background: #fff;
      }
      &.drop-left::after {
        top: -1px;
        @extend .drop;
        margin-left: 23px;
      }
      &.drop-right::after {
        bottom: -1px;
        @extend .drop;
        margin-left: 23px;
      }
      &.drop-child {
        background: #e6eeff;
      }
    }
  }
  .item-slug,
  .item-link {
    @extend .text-overflow;
    z-index: 1;
  }
  .item-link {
    font-size: 15px;
    position: relative;
    padding-left: 20px;

    .fa-arrow {
      cursor: pointer;
      position: absolute;
      left: 5px;
      top: calc(50% - 4px);
      font-size: 12px;
      color: #888;

      &:hover {
        color: #000;
      }
    }
  }
  .item-slug {
    font-size: 13px;
    margin-right: 10px;
  }
}

.drop {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: $primary;
}

.toc-tree-bottom-toolbar {
  margin-bottom: 8px;
}

.toc-tree-toolbar {
  @extend .card;
  @extend .card:hover;

  position: relative;

  .actions {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .fas {
    font-size: 16px;
  }

  .dropdown-menu {
    text-align: left;
    right: -9px;
    top: calc(100% - -1px);
  }
}

.toc-tree[data-edit-mode="true"] {
  .toc-items {
    .toc-item {
      cursor: default;

      &.toc-item-dragging {
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
      }

      &:hover {
        background: #fff;
        .item-slug {
          visibility: hidden;
        }
        .item-more {
          display: block;
          summary {
            color: rgb(68, 68, 68);
            border-color: #e0e0e0;
          }
        }
        .item-connect-line {
          display: none;
        }
      }
      .item-more {
        display: none;
        margin: 0 5px;

        summary {
          border: 1px solid transparent;
          height: 20px;
          line-height: 20px;
          width: 20px;
          border-radius: 2px;
          text-align: center;
          vertical-align: middle;

          &:hover {
            color: #555 !important;
            background: #fff;
          }
          &:active {
            background: #eee;
          }
        }
        .dropdown-item {
          display: block !important;
        }
      }
      details[open] {
        background: #f7f7f7;
        summary {
          background: #eee !important;
          border: 1px solid #e0e0e0 !important;
        }
      }
    }
  }
}

// doc page
.reader-body {
  .toc-tree {
    .item-slug {
      display: none;
    }
    .item-connect-line {
      display: none;
    }
  }
}

// repo page
.page-repositories {
  .repo-toc-toolbar {
    font-size: 13px;
    text-align: center;
  }
  .edit-switch {
    margin-left: 20px;
    color: #666;
    span {
      vertical-align: middle;
    }
  }
  .toc-tree {
    text-align: left;
    .toc-item {
      margin: 5px 0;
    }
    .item-more {
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9;
    }
    .item-link {
      max-width: 70%;
    }
    .item-slug {
      max-width: 30%;
    }
    .item-connect-line {
      flex: 1;
      height: 1px;
      margin: 0 10px;
      background: #eaeaea;
    }
  }
}
